<template>
	<view class="container">
		<view class="top-bg">
			<view class="title">设备健康状态监测云服务</view>
			<view class="logo">
				<!-- <image src="../../static/login/logo.png"></image> -->
			</view>
		</view>
		<view class="login-form">
			<view class="form-group">
				<view class="form-title"><uni-icons color="#3079bd" type="person" size="26"></uni-icons></view>
				<input placeholder="请输入用户名/手机号" v-model="userName"></input>
			</view>
			<view class="form-group">
				<view class="form-title"><uni-icons color="#3079bd" type="locked" size="26"></uni-icons></view>
				<input placeholder="请输入6-16位密码" v-model="password" :password="!showPassword"/>
			</view>
			<view>
				<button :loading="loading" @tap="handlelogin" class="login-btn">登录</button>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import config from "@/common/config.js" // 全局配置文件
export default{
	data(){
		return{
			userName: '',
			password: '',
			showPassword: false, //是否显示明文
			msgType: 'success',
			messageText: '这是一条成功提示',
			loading: false,
			
		}
	},
	methods:{
		handlelogin: function(){
			if(!this.userName || this.userName.length==0){
			  this.$tip.toast('请填写用户名');
			  return;
			}
			if(!this.password || this.password.length==0){
			   this.$tip.toast('请填写密码');
			  return;
			}
			let loginParams = {
			  username:this.userName,
			  password:this.password
			}
			this.loading=true;
			uni.request({
				url: config.baseUrl + 'auth/appLogin',
				method: "POST",
				data: loginParams,
				success: (res) => {
					console.log('resres',res)
					this.loading = false
					if (res.data.code === 200) {
						this.msgType = 'success'
						this.messageText = `登录成功`
						this.$refs.message.open()
						uni.setStorageSync('storage_key', res.data.data.access_token);
						uni.setStorageSync('userName', this.userName);
						if (this.userName === 'user') {
							uni.switchTab({
								url: `/pages/index/index`
							});
						} else {
							uni.switchTab({
								url: `/pages/index/index`
							});
						}
					} else {
						this.msgType = 'error'
						this.messageText = res.data.msg
						this.$refs.message.open()
					}
			  },
			});
			
		}
		
	}
}
</script>

<style>
	.container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  width: 100%;
	  position: relative;
	  background-color: #f8f8f8;
	  /* background: linear-gradient(to bottom, #4191ea,#83c6ed); */
	  height: 100vh;
	}
	.top-bg {
	  position: absolute; 
	  top: 0;
	  left: 0;
	  right: 0;
	  height: 50%;
	  background: linear-gradient(to bottom, #4191ea,#83c6ed);
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  border-radius: 0 0 10rpx 10rpx;
	}
	.title {
	  font-size: 35rpx; /* 根据需要调整字体大小 */
	  color: #ffffff; /* 文字颜色 */
	}
	.logo {
	  /* 例如，设定图片宽高为 100rpx */
	  width: 400rpx;
	  height: 400rpx;
	}
	.logo image {
	  /* 保证图片填充整个容器 */
	  width: 100%;
	  height: 100%;
	}
	.login-form {
	  position: absolute;
	  top: 40%; /* 垂直居中 */
	  height: 450rpx;
	  width: 400rpx;
	  background-color: #ffffff;
	  padding: 50px;
	  border-radius: 8px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	  display: flex; /* 新增 */
	  flex-direction: column; /* 新增 */
	  justify-content: space-between; /* 新增 */
	  align-items: center; /* 新增 */
	}
	.form-group {
	  display: flex;
	  font-size: 25rpx;
	  width: 100%;
	  margin-bottom: 25px;
	  border-bottom: 1px solid #ddd; /* 添加下划线 */
	  align-items: center;
	}
	
	.form-title {
	  margin-right: 10px;
	}
	
	input {
	  width: 100%;
	  padding: 10px;
	  outline: none;
	}
	.forgetmsg{
	  margin-left: auto; /* 自动向左对齐 */
	  cursor: pointer; /* 鼠标悬停时显示手形光标 */
	  color: #4aa9ed;
	  margin-top: -80rpx;
	  font-size: 25rpx;
	}
	.login-btn{
	  background-color: #4b9eee;
	  color: #ffffff;
	  width: 300rpx;
	  height: 80rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 30rpx;
	}
</style>

